@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (max-width:480px), {
    body {
	font-size: regular;
	width: 90%;
    }
    p { font-size: regular;}
    pre { font-size: 100%; }
    .code { font-size: 100%; }
    a img { width: 100%; }
    
    h2, h3{
	text-align: center;
	background-color: #342;
	color: #DF8;
	font-size: 125%;
    }
    h1{
	text-align: center;
	background-color: #342;
	color: #DF8;
	font-size: 150%;
    }
    .imgcaption{
	width: 90%; float: none;

    }

}
@media only screen and (-webkit-max-device-pixel-ratio: 2),
only screen and (min-width: 480px),{
    body {
	width: 80%;
    }
    pre { font-size: 120%; }
    .code { font-size: 120%; }
    .imgcaption{
	width: 15%; float: right;
    }

}
body{
    font-family: sans-serif;
    background: #111;
    color: #E70;
    letter-spacing: 0.4pt;
    margin: auto;
    padding-bottom: 50px;
    font-size: 12pt;
}
a{
    background: #342;
    color: #DF8;
}

a:visited{
    background: #DF8;
    color: #342;
}
pre{
    font-family: monospace;
    background: #342;
    color: #DF8;
    border: 1px dashed #120;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    overflow: auto;
}

.code{
    display: inline-block;
    font-family: monospace;
    background-color: #342;
    color: #DF8;
    padding-left: 5px;
    padding-right: 5px;
}

/* mathjax blocks */
.MathJax_CHTML {
    padding: 10px;
    background-color: #342;
    color: #df8;
    }
img { width: 100%; }
.container { width: 100%; }
.container img {width: 45%; height: auto; padding: 10px;
		      background-color: #111;}
.container p { font-style: italic; }
.banner { width: 100% display: block;
		margin-left: auto;
		margin-right: auto;
		height: auto;}
.banner img { width: 100%; }
.imgcaption{
    border: 1px solid #e70;
    padding: 10px;
    margin: 10px;
}